
import React, { Component } from 'react';
import ReactDOM from "react-dom";
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import { List, Checkbox, Flex,DatePicker } from 'antd-mobile';
// import { DatePicker, List } from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';



const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const utcNow = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));

const CustomChildren = ({ extra, onClick, children }) => (
    <div
      onClick={onClick}
      style={{ backgroundColor: '#fff', height: '45px', lineHeight: '45px', padding: '0 15px' }}
    >
      {children}
      <span style={{ float: 'right', color: '#888' }}>{extra}</span>
    </div>
  );
  
class Dates extends Component{
    constructor(porps){
        super(porps);
        this.formatDate=this.formatDate.bind(this);
        this.state = {
            date: now,
            time: now,
            utcDate: utcNow,
            dpValue: null,
            customChildValue: null,
            visible: false,
          }
          this.checkDate=this.checkDate.bind(this);
      
    }
    formatDate(date) {
        /* eslint no-confusing-arrow: 0 */
        const pad = n => n < 10 ? `0${n}` : n;
        const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
        const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
        return `${dateStr} ${timeStr}`;
      }
      checkDate(date){
        this.setState({ date })
    //    const a= this.state.date.slice(1,10)
        console.log('----value----',this.state.date)  
      }
    render(){
        let minDate = new Date(nowTimeStamp - 1e7);
        const maxDate = new Date(nowTimeStamp + 1e7);
        // console.log(minDate, maxDate);
        if (minDate.getDate() !== maxDate.getDate()) {
        // set the minDate to the 0 of maxDate
        minDate = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
        } 
        
        return <div>
                SSSS
            <List className="date-picker-list" style={{ backgroundColor: 'white' }}>
                <DatePicker
                mode="date"
                // title="Select Date"
                extra="Optional"
                value={this.state.date}
                // onChange={date => this.setState({ date })}
                onChange={this.checkDate}
                >
                <List.Item arrow="horizontal">日期</List.Item>
                </DatePicker>
            </List>
            <div>
               <Link to='./menu'> 跳转到menu页面</Link>
            </div>
        </div>
    }
}
export default Dates;